<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收银台</title>
		<link rel="icon" type="image/x-icon" href="img/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/top.css" />
		<link rel="stylesheet" type="text/css" href="css/address.css" />
	</head>
	<body>
		<div id="box">
			<div id="top" style="border-bottom: 1px solid lightgray;margin-top: 5px;margin-bottom: 5px;">
				<div class="top-c">
					<span id="index" style="margin-left: 20px;cursor: pointer;">回到首页</span>
					<img src="img/logo.png">
				</div>
			</div>
			<div id="middle">
				<div class="middle-left">
					<p>收货地址</p>
					<table border="0">
						<tr>
							<td>*&nbsp;&nbsp;&nbsp;姓名</td>
							<td><input type="text" id="name" autocomplete="off"/></td>
						</tr>
						<tr>
							<td>*&nbsp;&nbsp;&nbsp;手机号码</td>
							<td><input type="text" id="phone" autocomplete="off"/></td>
						</tr>
						<tr>
							<td>*&nbsp;&nbsp;&nbsp;家庭住址</td>
							<td>
								<div class="form-group">
									<select name="" id="province"></select>
									<select name="" id="city"></select>
									<select name="" id="area"></select>
								</div>
							</td>
						</tr>
						<tr>
							<th colspan="2"><button type="button">保存</button></th>
						</tr>
					</table>
				</div>
				<div class="middle-right">
					<p>订单汇总</p>
					<div class="shop">
						<p>商品清单</p>
						<img src="" style="width: 120px;">
						<div class="xq">
							<p></p>
							<p>单价：<span></span></p>
							<p>商品编号：<span></span></p>
							<p>颜色：<span>紫色</span></p>
							<p>尺寸：<span>160/88A (S)</span></p>
							<p>数量：<span></span></p>
							<p>总额：<span></span></p>
						</div>
						<button type="button">结账</button>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/top.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Ip.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/yanzheng.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/citys.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$.ajax({
				url:`${IP}/detail`,
				data:{
					id:id
				},
				success:function(data){
					$(".shop img").attr("src",data[0].img)
					$(".shop .xq p").eq(0).html(data[0].title)
					$(".shop .xq p").eq(1).find("span").html(`￥${data[0].price}.00`)
					$(".shop .xq p").eq(2).find("span").html(data[0].id)
					$(".shop .xq p").eq(5).find("span").html(num)
					let addcount = num * data[0].price
					$(".shop .xq p").eq(6).find("span").html(`￥${addcount}.00`)
				}
			})
			let isclick = localStorage.getItem("isclick")
			$("#name").val(localStorage.getItem("name"))
			$("#phone").val(localStorage.getItem("phone"))
			if(localStorage.getItem("province") && localStorage.getItem("city") && localStorage.getItem("area")){
				$("#province").val(localStorage.getItem("province"))
				$("#province").change()
				$("#city").val(localStorage.getItem("city"))
				$("#city").change()
				$("#area").val(localStorage.getItem("area"))
			}
			$(".middle-left button").click(function(){
				if($("#name").val() && $("#phone").val()){
					alert("保存成功!")
					isclick = true
					localStorage.setItem("name",$("#name").val())
					localStorage.setItem("phone",$("#phone").val())
					localStorage.setItem("province",$("#province").val())
					localStorage.setItem("city",$("#city").val())
					localStorage.setItem("area",$("#area").val())
					localStorage.setItem("isclick","true")
				}else{
					alert("请填写收货人信息并保存!")
				}
			})
			$(".shop button").click(function(){
				if($("#name").val() && $("#phone").val()){
					if(isclick){
						$.ajax({
							url:`${IP}/pay`,
							data:{
								userID:username,
								goodsID:id,
								number:num,
								name:$("#name").val(),
								phoneNumber:$("#phone").val(),
								province:$("#province").val(),
								city:$("#city").val(),
								area:$("#area").val()
							},
							success:function(data){
								if(data === "success"){
									alert("支付成功")
									location.href = `${IP}/person.html`
									localStorage.removeItem("id")
								}else{
									alert("支付失败")
								}
							}
						})
					}
					else{
						alert("请保存收货人信息")
					}
				}
				else{
					alert("请填写收货人信息并保存!")
				}
			})
		</script>
	</body>
</html>
